<template>
  <div>
    <div>
      <el-input
          size="small"
          style="width: 25%;margin-right: 5px"
          placeholder="添加职位..."
          prefix-icon="el-icon-plus"
          v-model="pos.name">
      </el-input>
      <el-button
          size="mini"
          type="primary"
          @click="Add()">
        添加职位
      </el-button>
      <transition name="el-zoom-in-bottom">
      <el-button v-show="this.multipleSelection.length!=0" type="danger" size="mini" @click="complexDel">批量删除</el-button>
      </transition>
    </div>
    <div style="margin-top: 10px">
      <el-table
          :data="positions"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="编号"
            width="70">
        </el-table-column>
        <el-table-column
            prop="name"
            label="职位名"
            width="155">
        </el-table-column>
        <el-table-column
            prop="createDate"
            label="创建时间/修改时间"
            width="180">
        </el-table-column>
        <el-table-column
            label="是否启用" width="85">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.enabled" type="success" size="small">已启用</el-tag>
            <el-tag v-else type="danger" size="small">未启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
              <el-button-group>
                <el-button type="primary" size="mini" @click="showEditView(scope.$index,scope.row)"  icon="el-icon-edit"></el-button>
                <el-button type="danger" size="mini" @click="Del(scope.$index,scope.row)" icon="el-icon-delete"></el-button>
              </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
        title="修改职位"
        :visible.sync="dialogVisible"
        width="30%">
      <div>
        <el-input  size="small" v-model="updatePos.name"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
    <el-button size="mini" type="primary" @click="doUpdate">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>


export default {
  name: "PosManager",
  data(){
    return{
      pos:{
        name:''
      },
      updatePos:{
        name:''
      },
      show:false,
      dialogVisible:false,
      positions: [],
      multipleSelection: []
    }
  },
  mounted() {
    this.initPos();
  },
  methods:{
    initPos(){
      this.getRequest("/system/basic/pos/").then(resp=>{
        if(resp){
          this.positions=resp;
        }
      })
    },
    Add(){
      if(this.pos.name){
        this.postRequest("/system/basic/pos/insert",this.pos).then(resp=>{
            this.initPos();
        });
        this.pos.name=' ';
      }else{
        this.$message.error("请输入部门名称！");
      }
    },
    showEditView(index,data){
      Object.assign(this.updatePos,data);
      this.dialogVisible=true;
    },
    doUpdate(){
      this.putRequest("/system/basic/pos/update",this.updatePos).then(resp=>{
        if(resp){
          this.initPos();
          this.updatePos.name=' ';
          this.dialogVisible=false;
        }
      })
    },
    Del(index,data){
      this.$confirm('此操作将永久删除【'+data.name+'】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest("/system/basic/pos/"+data.id).then(resp=>{
          if(resp){
            this.initPos();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSelectionChange(val){
      this.multipleSelection = val
      this.show=true;
    },
    complexDel(){
      this.$confirm('此操作将永久删除这'+this.multipleSelection.length+'条数据，请仔细核对', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = '?';
        this.multipleSelection.forEach(item=>{
          ids+='ids='+item.id+'&';
        })
        console.log(ids);
        this.deleteRequest("/system/basic/pos/"+ids).then(resp=>{
          if(resp){
            this.initPos();
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped>

</style>